<template>
  <div class="forget">
    <!-- 顶部 -->
    <van-nav-bar title="忘记密码" />
    <!-- 表单验证 -->
    <van-form @submit="onSubmit" ref="regForm">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { validator: (e) => /^\w{6,12}$/.test(e), message: '密码格式错误' },
        ]"
      />
      <van-field
        v-model="vercode"
        clearable
        name="vercode"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' },
        ]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            native-type="button"
            @click="onvercode()"
            :disabled="dis"
            >{{ code_sts }}</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" color="#05be6b"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {forget,sendSms} from "@/api/user.js";
export default {
  data() {
    return {
      username: "",
      password: "",
      vercode: "",
      dis: false,
      code_sts: "发送验证码",
    };
  },
  methods: {
    // 忘记密码请求
    onSubmit(values) {
      console.log("submit", values);
      forget(values).then((res) => {
        console.log(res);
        setTimeout((v)=>{
            this.$router.back()
        },1000  )
      });
    },
    // 验证码状态
    async onvercode() {
      try {
        let res = await this.$refs.regForm.validate("username");
        // 按钮不可点击
        this.dis = true;
        // 按钮状态
        this.code_sts = "发送中...";
        // 定时器编号
        let timer = null;
        let count = 60;
        // 验证码请求
        sendSms({
          mobile: this.username,
          type: "login",
        })
          .then((res) => {
            // 消息弹窗提示
            if (res.code == 0) {
              this.$toast(`验证码已经发送到${this.username},请注意查看`);
              // 倒计时
              timer = setInterval((e) => {
                count--;
                this.code_sts = `${count}s再次发送`;
                // 判断秒数
                if (count >= 0) {
                  clearInterval(timer);
                  count = 60;
                  this.code_sts = "再次获取";
                  this.dis = false;
                }
              }, 1000);
            } else {
              this.$toast(res.msg);
              this.dis = false;
              this.code_sts = "再次发送";
            }
          })
          .catch((err) => {
            // 网络波动 提示失败 恢复点击的状态
            this.$toast(res.mag || "网络错误");
            this.dis = false;
            this.code_sts = "再次发送";
          });
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style scoped lang="less">
</style>